<template>
  <view class="hot-banner">
    <image
      src="/static/images/index/suggest_title.png"
      mode="heightFix"
      class="hot-banner-title"
    />
    <view class="hot-banner-area">蜜雪冰城（宝安中心店）</view>
    <scroll-view
      class="hot-banner-products"
      scroll-x
    >
      <view
        class="hot-banner-products-item"
        v-for="item in hotProductList"
        :key="item.productId"
      >
        <image
          class="hot-banner-products-item-image"
          :src="item.productLogo"
        />
        <view class="hot-banner-products-item-info">
          <view class="hot-banner-products-item-info-name">
            {{ item.productName }}
          </view>
          <view class="hot-banner-products-item-info-bottom">
            <view class="hot-banner-products-item-info-bottom-price">
              ￥{{ $tools.formatPrice(item.productPrice) }}
            </view>
            <image
              src="/static/images/index/plus.png"
              class="hot-banner-products-item-info-bottom-button"
            />
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: "HotBanner",
  data() {
    return {
      hotProductList: [
        {
          productId: "1",
          productName: "雪王柠檬奶",
          productPrice: 660,
          productLogo: "/static/images/menu/products/1.jpg"
        },
        {
          productId: "2",
          productName: "柠檬奶咖啡",
          productPrice: 760,
          productLogo: "/static/images/menu/products/2.jpg"
        },
        {
          productId: "3",
          productName: "苹果奶绿",
          productPrice: 600,
          productLogo: "/static/images/menu/products/3.jpg"
        },
        {
          productId: "4",
          productName: "苹果冰美式",
          productPrice: 700,
          productLogo: "/static/images/menu/products/4.jpg"
        },
        {
          productId: "5",
          productName: "柚子轻乳茶",
          productPrice: 600,
          productLogo: "/static/images/menu/products/5.jpg"
        },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.hot-banner {
  background-image: url("/static/images/index/suggest_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: $uni-border-radius-xl;
  overflow: hidden;
  padding: $uni-spacing-row-lg 0 $uni-spacing-row-lg $uni-spacing-row-lg;

  &-title {
    height: 36rpx;
    margin-bottom: $uni-spacing-row-sm;
  }

  &-area {
    display: flex;
    align-items: center;
    color: $uni-text-color;
    font-size: $uni-font-size-sm;
    margin-bottom: $uni-spacing-row-sm;
  }

  &-products {
    width: 100%;
    white-space: nowrap;

    &-item {
      display: inline-block;
      background-color: #fff;
      border-radius: $uni-border-radius-base;
      border: 1rpx solid $uni-color-primary-light;
      margin-right: $uni-spacing-row-lg;

      &-image {
        width: 200rpx;
        height: 200rpx;
        padding: $uni-spacing-row-sm;
      }

      &-info {
        display: flex;
        flex-direction: column;
        padding: $uni-spacing-row-base;

        &-name {
          font-size: $uni-font-size-sm;
          color: $uni-text-color;
          margin-bottom: $uni-spacing-row-xs;
        }

        &-bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;

          &-price {
            font-size: $uni-font-size-sm;
            color: $uni-text-color;
          }

          &-button {
            width: 50rpx;
            height: 50rpx;
          }
        }
      }
    }
  }
}
</style>
